<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0,maximum-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/iconfont/iconfont.css">
    <link rel="stylesheet" href="css/date.css">
    <title>日历</title>
</head>
<body ng-app="Date"  ng-controller="Mydate">
<div class="container">
    <div class="securitydate-content">
        <div class="securitydate-year">
            <div class="year">
                <span ng-bind="year"></span>
                <i class="iconfont icon-hengpai"></i>
                <ul>
                    <li ng-repeat="Y in allyears" ng-bind="Y" ng-click="changeyear(Y)"></li>
                </ul>
            </div>
            <div class="month-nav">
                <div class="monthchange prevmonth">
                    <i class="iconfont icon-yousanjiao"></i>
                </div>
                <div class="allmonth">
                    <ul>
                        <li ng-repeat="M in allmonths"  ng-click="changemonth(M)" ng-class="month==M?'active':''" ng-cloak=""><span>{{M}}</span></li>
                    </ul>
                </div>
                <div class="monthchange nextmonth">
                    <i class="iconfont icon-zuosanjiao"></i>
                </div>
            </div>
            <div class="day-contant">
                <table class="table">
                    <tr>
                        <th class="rest">周日</th>
                        <th>周一</th>
                        <th>周二</th>
                        <th>周三</th>
                        <th>周四</th>
                        <th>周五</th>
                        <th class="rest">周六</th>
                    </tr>
                    <tr ng-repeat="day in days">
                        <td ng-repeat="d in day" ng-class="today == d.datenum?'active2':!d.able?'cannot':''" ng-click="chooseday(d.datenum,d)">
                            {{d.datenum}}
                            <i class="iconfont icon-finish" ng-show="d.able && d.flag"></i>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-2.2.0.js"></script>
<script src="js/angular.1.4.6.min.js"></script>
<script>
    var app  = angular.module('Date',[]);
    app.controller('Mydate',function ($scope) {
        //年份及日期点击事件
        $('.year').click(function () {
            $('.year ul').slideToggle();
        });
        $('.prevmonth').click(function () {
            $('.allmonth ul').css('left',0);
        });
        $('.nextmonth').click(function () {
            $('.allmonth ul').css('left', -360);
        });

        //获取当前日期
        $scope.year = new Date().getFullYear();
        $scope.month = new Date().getMonth()+1;
        $scope.today = new Date().getDate();
        $scope.allyears = [$scope.year-1,$scope.year-2,$scope.year-3,$scope.year-4,$scope.year-5];
        $scope.allmonths = [1,2,3,4,5,6,7,8,9,10,11,12];
        if($scope.month<=6){
            $('.allmonth ul').css('left', 0);
        }else{
            $('.allmonth ul').css('left', -360);
        }

        //判断是否是闰年
        function isLeapYear(data) {
            var cond1 = data % 4 == 0;  //条件1：年份必须要能被4整除
            var cond2 = data % 100 != 0;  //条件2：年份不能是整百数
            var cond3 = data % 400 ==0;  //条件3：年份是400的倍数
            //当条件1和条件2同时成立时，就肯定是闰年，所以条件1和条件2之间为“与”的关系。
            //如果条件1和条件2不能同时成立，但如果条件3能成立，则仍然是闰年。所以条件3与前2项为“或”的关系。
            //所以得出判断闰年的表达式：
            var cond = cond1 && cond2 || cond3;
            return cond;
        }

        //判断一个月有多少天
        $scope.monthDay = 30;//设置一个默认天数

        $scope.monthdays=[31,28,31,30,31,30,31,31,30,31,30,31];//建立一个数组，匹配一年不同月份的天数

        $scope.getmonthday = function (month){
            if(isLeapYear($scope.year)){
                $scope.monthdays[1] =29;//闰年
            }else{
                $scope.monthdays[1] =28;//平年
            }
            if(month == 0){
                month =12;
            }
            return $scope.monthdays[month-1];//获取当前月总共有多少天

        };
        $scope.changemonth = function(month) {

            $scope.month = month;
            $scope.monthDay= $scope.getmonthday(month);//当前月的天数

            $scope.lastmonthDay=$scope.getmonthday(month-1);//上个月的天数

            var dayOfWeek = new Date($scope.year,month-1,1).getDay();//当前月1号对应的星期几

            var str_nums = Math.ceil((dayOfWeek + $scope.monthDay) / 7); //确定日期表格所需的行数

            $scope.days = [];//新建一个日期数组，用来存放当月日期
            var num=1;
            for (var i = 0; i < str_nums; i++) {
                var week = [];
                for (var k = 0; k < 7; k++) {
                    var idx = 7 * i + k;
                    var date = idx - dayOfWeek + 1;
                    var n= 0,able=false;
                    if(date<=0){//判断当前月1号之前有没有空值，有的话填补上月的后几天
                        n=$scope.lastmonthDay+date;
                    }else if(date>$scope.monthDay){//判断当月最后一天之后有没有空值，有的话填写下个月的前几天
                        n=num;
                        num++;
                    }else{
                        n=date;
                        able=true;
                    }
                    week.push({//存放每一行的数据
                        datenum:n,
                        able:able,
                        flag:false
                    });
                }
                $scope.days.push(week);//将每一行的数据存储到数组中
            }
        };

//        选择年份
        $scope.changeyear=function (year) {
            $scope.year =year;
            $scope.changemonth($scope.month);
        };


//        判断是否选中日期
        $scope.checkday =[];
        $scope.chooseday = function (day,dayobj) {
            console.log(dayobj);
            var checktoday = $scope.year + '-' + $scope.month + '-' + day;
            $scope.checkday.push(checktoday);
            var array = quchong($scope.checkday);
            if(array.length<$scope.checkday.length){
                for(var i =0;i<array.length;i++){
                    if(checktoday == array[i]){
                        array.splice(i,1);
                        dayobj.flag =false;
                    }
                }
            }else{
                dayobj.flag =true;
            }
            $scope.checkday = array;
            console.log($scope.checkday);
        };

//        数组去重
        function quchong(arr) {
            var array= [];
            for(var i =0; i<arr.length;i++){
                if(arr.indexOf(arr[i]) == i){
                    array.push(arr[i]);
                }
            }
            return array;
        }

        $scope.changemonth($scope.month);

    });

</script>
</body>
</html>